<template>
  <div>
    <!-- 写入少量代码 -->
    <!-- <button v-on:click="num += 1">点击以后num+1</button> -->
    <!-- 绑定methods中函数 -->
    <!-- <button v-on:click="fn1">点击</button> -->
    <!-- 绑定methods中函数,传入实参 -->
    <!-- <button v-on:click="fn(10)">点击以后打印</button> -->
    <!-- <span>{{ num }}</span> -->

    <!-- <a href="" v-on:click="fn(10, $event)">点击按钮</a> -->
    <!-- <a href="" v-on:click="fn2">点击按钮</a> -->
    <!-- <a href="" v-on:click.prevent="fn2">点击按钮</a> -->
    <div class="father" @click="fn(10)">
      <a href="" @click.prevent.stop="fn2">点击按钮</a>
    </div>
  </div>
</template>

<script>
export default {
  //数据源
  data() {
    return {
      num: 0,
    }
  },

  //方法集合
  methods: {
    //在这个对象中写上方法
    fn(a) {
      console.log(a)
    },
    fn1() {
      //在方法中使用当前组件的data数据和methods中方法时需要加上this
      console.log(this.num)
      this.num += 1
    },
    fn2() {
      console.log('hello')
    },
  },
}
</script>

<style lang="less"></style>
